<template>
  <div>
    <el-select v-model="allValue" placeholder="全部风格模板" @change="selectChangeAll">
      <el-option
        v-for="(item,index) in shopStyle"
        :key="index"
        :label="item.style_name"
        :value="item.style_id"
      ></el-option>
    </el-select>
    <div class="free" v-if="AllFree">
      <i class="shu"></i>
      <span>免费模板</span>
      <div class="free-list">
        <div class="free-item" v-for="(item,index) in freeList" :key="index">
          <div class="free-item-photo">
            <img :src="item.image" alt />
          </div>
          <p>{{item.template_name}}</p>
          <p>免费</p>
          <p
            :class="item.is_user?'user-temp current' : 'user-temp'"
            @click="addMyList(item)"
          >{{item.is_user ? '正在使用' : '使用模板'}}</p>
        </div>
      </div>
    </div>
    <div class="buyed" v-if="AllBuy">
      <i class="shu"></i>
      <span>收费模板</span>
      <div class="free-list">
        <div class="free-item" v-for="(item,index) in payList" :key="index">
          <div class="free-item-photo">
            <img :src="item.image" alt />
          </div>
          <p>{{item.template_name}}</p>
          <p
            :class="item.is_user?'user-temp current' : 'user-temp'"
          >{{item.is_buy?'已购买':item.price+".00"}}</p>
          <p
            :class="item.is_user?'user-temp current' : 'user-temp'"
            @click="buyTemplete(item)"
          >{{item.is_user ? '正在使用' : item.is_buy ? '使用模板':'购买模板'}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'templeteShop',
  props: {
    shopStyle: {
      type: Array,
      required: true
    },
    freeList: {
      type: Array,
      required: true
    },
    payList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      AllFree: true,
      AllBuy: true,
      allValue: '全部风格模板'
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    selectChangeAll (val) {
      if (val === 0) {
        this.AllFree = true
        this.AllBuy = true
      } else if (val === -1) {
        this.AllFree = true
        this.AllBuy = false
      } else if (val === 1) {
        this.AllBuy = true
        this.AllFree = false
      }
    },
    addMyList (item) {
      this.$emit('addMyList', item)
    },
    buyTemplete (item) {
      this.$emit('buyTemplete', item)
    }
  }
}
</script>

<style scoped lang="less">
.current {
  color: green !important;
}
/deep/.el-tabs__active-bar {
  display: none;
}
i.shu {
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: #333;
  margin-top: 20px;
  margin-right: 10px;
}
img {
  width: 100%;
  height: 100%;
}
.free,
.buyed {
  .free-list {
    display: flex;
    padding: 20px 60px;
    flex-wrap: wrap;
    /deep/.free-item {
      width: 160px;
      text-align: center;
      margin-right: 100px;
      > p {
        font-size: 16px;
      }
      p.user-temp {
        color: skyblue;
        cursor: pointer;
      }
    }
  }
}
.free-item:nth-child(4n) {
  margin-right: 0 !important;
}
.free-item-photo {
  width: 165px;
  height: 260px;
  border: 15px solid #ccc;
  padding: 5px;
}
</style>
